<template>
    <div class="chooseSpecis">
        <h3>请添加你要发布的商品</h3>
        <div v-for="(item,index) in arr" v-if="arr.length!==0" style="margin-right: 20px;display: inline-block;">
            <span style="display: inline-block; margin-right: 1em;vertical-align: middle;">{{title[index]}}</span>
            <select :ref="'select'+index" @change="showValue(index)">
                <option value="" selected>请选择</option>
                <option value="items" v-for="items in item">{{items}}</option>
            </select>

        </div>
        <!--<el-select :model="form" placeholder="请选择"  v-for="(item,index) in this.speciGroups" :key="index" @visible-change="visibleChange">
            <el-option value="-1" :label="item.specificationName"></el-option>
            <el-option
                    v-for="item1 in item.specificationJson"
                    :key="index"
                    :label="item1"
                    :value="item1">
            </el-option>
        </el-select>-->

        <el-button type="primary" @click="addOneProduct">确认添加</el-button>


    </div>
</template>

<script>
    import {getProInfo} from '@/utils/storeProInfo.js';

    export default {
        name: 'chooseSpeci',
        props: {
            speciGroups: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            normal: {
                type: String,
                default: ''
            },
            'leaseDays': {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        data() {
            return {
                arr: [],
                title: [],
                selectedSpeci: [],
            }
        },
        methods: {
            translateData() {
                /*let data = [
                    {
                        specification: "specification_fifth",
                        specificationJson: ["3G", "4G", "5G"],
                        specificationName: "网络"
                    },
                    {
                        specification: "specification_fifth",
                        specificationJson: ["3G", "4G", "5G"],
                        specificationName: "网络"
                    },
                    {
                        specification: "specification_fifth",
                        specificationJson: ["3G", "4G", "5G"],
                        specificationName: "网络"
                    },
                    {
                        specification: "specification_fifth",
                        specificationJson: ["3G", "4G", "5G"],
                        specificationName: "网络"
                    },
                    {
                        specification: "specification_fifth",
                        specificationJson: ["3G", "4G", "5G"],
                        specificationName: "网络"
                    },
                ]*/
                /* for (let key in this.speciGroups) {
 //                    data[key] 是个对象
                     let arr1 = [];
                     this.title.push(key);
                     console.log(this.speciGroups[key])
                     for (let a in this.speciGroups[key]) {
 //                        data[key] 是个数组
                         console.log(this.speciGroups[key][a]);
                         let obj = {
                             value: this.speciGroups[key][a]
                         };
                         arr1.push(obj);
                     }
                     this.arr.push(arr1);

                 }*/
                for (let item of this.speciGroups) {
                    this.title.push(item.specificationName);
                    this.arr.push(item.specificationJson);
                }
                this.$emit('get-speci-name', this.title);
            },
            addOneProduct() {
//                讲选中的数据全部添加到表格中
//                点击添加一个就向父组件发送一个数据
                if (this.normal) {
//                    普通发布
                    let leaseDays = getProInfo().leaseDays ? getProInfo().leaseDays : [];

                    if (leaseDays.length == 0) {
                        this.$message({
                            type: 'warning',
                            message: '请先添加租期'
                        });
                        return;
                    }
                    if (this.selectedSpeci.length == 0) {
                        this.$message({
                            type: 'warning',
                            message: '请至少选择一种规格'
                        });
                        return;
                    }
                    for (let item of this.selectedSpeci) {
                        if (item !== '') {
                            this.$emit('add-speci', this.selectedSpeci);
                            break;
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '请至少选择一种规格'
                            });
                        }
                    }


                } else {
                    if (this.leaseDays.length == 0) {
                        this.$message({
                            type: 'warning',
                            message: '请先添加租期'
                        });
                        return;
                    }
                    if (this.selectedSpeci.length == 0) {
                        this.$message({
                            type: 'warning',
                            message: '请至少选择一种规格'
                        });
                        return;
                    }

                    for (let item of this.selectedSpeci) {
                        if (item !== '') {
                            this.$emit('add-speci', this.selectedSpeci);
                            break;
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '请至少选择一种规格'
                            });
                        }
                    }

                }


            },
            showValue(index) {
//                this.selectedSpeci.splice(index,1)
//                console.log(index)
//                console.log(this.$refs['select' + index]);
                let selectEle = this.$refs['select' + index][0];
                let indexSelected = selectEle.selectedIndex;
//                拿到被选中的索引值
                let value = selectEle.options[indexSelected].text == '请选择' ? '' : selectEle.options[indexSelected].text;
                this.selectedSpeci[index] = value
            }
        },
        mounted() {
            setTimeout(this.translateData, 20)

        }
    }
</script>

<style lang="less" scoped>
    .chooseSpecis {
        margin-bottom: 20px;
    }
</style>